<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0 0;
            padding: 0 0;
        }

        .demo {
            display: block;
            width: 400px;
            height: 255px;
            margin: 50px;
            position: relative;
            border: 1px solid #ccc;
        }

        .small-box {
            position: relative;
            z-index: 1;
        }

        .small-box img {
            width: 400px;
        }

        .float-box {
            display: none;
            width: 160px;
            height: 120px;
            position: absolute;
            background: #ffffcc;
            border: 1px solid #ccc;
            opacity: 0.5;
            pointer-events: none;
        }

        .mark {
            position: absolute;
            display: block;
            width: 400px;
            height: 225px;
            background-color: #fff;
            opacity: 0;
            z-index: 10;
        }

        .small-img {
            display: block;
        }

        .small-img:hover {
            cursor: pointer;
        }

        .big-box {
            display: none;
            position: absolute;
            top: 0;
            left: 460px;
            width: 400px;
            height: 300px;
            overflow: hidden;
            border: 1px solid #ccc;
            z-index: 1;
            pointer-events: none;
        }

        .img {
            position: absolute;
            z-index: 5
        }
    </style>
</head>

<body>
    <div class="demo">
        <!-- 左边的小图 -->
        <div class="small-box">

            <!-- <div class="mark"></div> -->
            <!-- 放大镜 -->
            <div class="float-box"></div>

            <img src="./img/cat.jpeg" class='small-img' />

        </div>

        <!-- 显示的大图 -->
        <div class="big-box">

            <img src="./img/cat.jpeg" class="img" />

        </div>
    </div>
</body>
<script src="img.js"></script>

</html>